<template>
  <div class="main">
    <div class="one">
      <div class="left" style="width: 70%">
        <el-card style="height: 37%" class="top">
          <div class="avator">
            <img src="@/assets/common/800.png" alt="" />
            <p>罗老师，别这样</p>
          </div>
          <div class="desc">
            <div class="sign">
              <p>我不是为了输赢，我就是认真！</p>
              <p style="text-align: right">—— 罗永浩</p>
            </div>
            <div class="location"><div>北京总仓</div></div>
          </div>
        </el-card>
        <el-card style="height: 58%" class="botton">
          <h4>待办信息</h4>
          <div class="content">
            <div
              v-for="item in todolist"
              :key="item.name"
              class="item"
              @click="$router.push(item.path)"
            >
              <div class="title">
                <div><i :class="item.icon" class="icon" /></div>
                <span>{{ item.name }}</span>
              </div>
              <div>
                新增 <span class="addnum">{{ item.addNum }}</span> 待审核
                <span class="checknum">{{ item.checkNum }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="right" style="width: 30%">
        <el-card style="height: 100%">
          <div slot="header">
            <h4>通知/公告</h4>
          </div>
          <div v-for="item in announcementList" :key="item.time" class="text">
            <p>{{ item.name }}</p>
            <span>{{ item.time }}</span>
          </div>
        </el-card>
      </div>
    </div>

    <div class="two">
      <el-card>
        <div slot="header">
          <h4>任务导航</h4>
        </div>
        <div class="task">
          <div
            v-for="item in taskNavigate"
            :key="item.name"
            @click="$router.push(item.path)"
          >
            <i :class="item.icon" class="test" style="font-size: 36px" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="three">
      <div class="title">
        <h4>入库出库信息</h4>
        <el-button-group>
          <el-button
            v-for="item in dateType"
            :key="item.name"
            type="primary"
            plain
            @click="infoEchart(item.value)"
          >
            {{ item.name }}
          </el-button>
        </el-button-group>
      </div>
      <div id="inbound-outbound-info" class="infochart" />
    </div>
    <div class="four">
      <div class="left" style="width: 35%">
        <el-card style="height: 100%">
          <h4>库存使用情况</h4>
          <div id="stock-service-condition" class="stockchart" />
        </el-card>
      </div>
      <div class="right" style="width: 65%">
        <el-card style="height: 100%">
          <h4>库区使用情况</h4>
          <div id="area-utilization" class="areautilization" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 引入api接口
import { getToDo, getInboundOutboundInfo, getStockUseStatus } from '@/api/user'
// 引入echart的options配置
import { infoOptions, stockService, utilizationOfArea } from './echarts/options.js'
export default {
  name: 'Dashboard',
  data() {
    return {
      todolist: [
        { name: '入库单', path: '/stock/godown-entry', icon: 'el-icon-s-fold' },
        { name: '出库单', path: '/manage-storage-out/out-list', icon: 'el-icon-s-unfold' },
        { name: '盘点单', path: '/managestorage/list', icon: 'el-icon-s-operation' }
      ],
      announcementList: [
        { name: '紧急盘点通知', time: '2020.1.30 18:30:30' },
        { name: '紧急盘点通知', time: '2020.2.30 18:30:30' },
        { name: '紧急盘点通知', time: '2020.3.30 18:30:30' },
        { name: '紧急盘点通知', time: '2020.4.30 18:30:30' }
      ],
      taskNavigate: [
        { name: '收货任务', path: '/stock/receiving-task', icon: 'el-icon-s-cooperation' },
        { name: '上架任务', path: '/stock/putaway-task', icon: 'el-icon-s-order' },
        { name: '盘点任务', path: '/managestorage/list-task', icon: 'el-icon-s-platform' },
        { name: '拣货任务', path: '/manage-storage-out/task-picking', icon: 'el-icon-s-management' },
        { name: '交接任务', path: '/manage-storage-out/manage-task-transfer', icon: 'el-icon-s-ticket' }
      ],
      dateType: [
        { name: '本周', value: 'w' },
        { name: '本月', value: 'e' },
        { name: '本年', value: 'c' }
      ],
      info: {},
      x: [],
      y1: [],
      y2: []
    }
  },
  async created() {
    this.getToDoData()
  },
  async mounted() {
    // 实例挂载后 调用echart图函数画图
    this.infoEchart()
    this.stockEchart()
    this.areaUtilization()
  },
  methods: {
    // 获取待办数据
    async getToDoData() {
      const res = (await getToDo()).data.data
      // 在todolist的基础上添加对应的数据
      this.todolist = this.todolist.map(item => {
        const obj = { ...item }
        const index = res.findIndex(v => v.name === obj.name)
        if (index !== -1) {
          obj.addNum = res[index].value1
          obj.checkNum = res[index].value2
        }
        return obj
      })
    },

    // echart-info图 出库入库信息
    async infoEchart(value = 'w') {
      const res = await getInboundOutboundInfo(value)
      this.x = res.data.data.x
      res.data.data.data.forEach(item => {
        item.name === '入库'
          ? this.y1 = item.data.map(v => Number(v))
          : this.y2 = item.data.map(v => Number(v))
      })
      this.initEchart('inbound-outbound-info', infoOptions(this.x, this.y1, this.y2))
    },

    // 库存使用情况echart图
    async stockEchart() {
      const option = stockService((await getStockUseStatus()).data.data)
      this.initEchart('stock-service-condition', option)
    },

    // 库区使用情况echart图
    async areaUtilization() {
      this.initEchart('area-utilization', utilizationOfArea())
    },

    // 初始化echart
    initEchart(id, option) {
      const chartDom = document.getElementById(id)
      const myChart = this.$echarts.init(chartDom)
      myChart.clear()
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/dashboard.scss";
</style>
